﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FytApi.MUI</title>
    <link href="/fytapiui/element-ui/index.css" rel="stylesheet"/>
    <link href="/fytapiui/element-ui/api.css" rel="stylesheet"/>
    <script src="/fytapiui/vue/vue.js"></script>
    <script src="/fytapiui/element-ui/index.js"></script>
    <script src="/fytapiui/vue/axios.min.js"></script>
    <script src="/fytapiui/vue/utils.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="headmenus">
                <el-button-group>
                    <el-button size="mini" icon="el-icon-edit">Cookie管理器</el-button>
                    <el-button size="mini" icon="el-icon-share" @click="openGlobalSetting">全局参数配置</el-button>
                    <el-button size="mini" icon="el-icon-delete">归档管理</el-button>
                </el-button-group>
            </div>
            <div class="head-tool">
                暗黑：
                <el-switch v-model="theme">
                </el-switch>
            </div>
        </el-header>
        <el-container>
            <el-aside class="group-wall" width="70px">
                <div class="btn-bar" v-for="(item,index) in version.list" :key="index"
                     :class="index==version.index?'active':''" @click="versionBar(item,index)">
                    <span>{{item.version}}</span>
                    <div class="group-name">{{item.name}}</div>
                </div>
            </el-aside>
            <el-aside class="api-scale" width="300px">
                <div class="api-search">
                    <el-input class="input-search" v-model="menuKey" clearable placeholder="支持中/英文搜索" size="small"
                              prefix-icon="el-icon-search">
                    </el-input>
                    <el-button type="info" icon="el-icon-finished" size="small" circle @click="openMenu"></el-button>
                </div>
                <el-menu class="api-menu" default-active="0" :default-openeds="openeds">
                    <el-submenu v-for="(item,index) in api.menu" :index="index.toString()" :key="index">
                        <template slot="title">
                            <i class="el-icon-folder"></i>
                            <span>{{item.group}} {{item.summary}}</span>
                        </template>
                        <el-menu-item v-for="(row,rowIndex) in item.api" :index="index.toString()" :key="rowIndex"
                                      @click="menuClick(row)">
                            <span class="method" :class="row.method.toLowerCase()">{{row.method}}</span>
                            {{row.summary ? row.summary : row.url}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main class="api-main">
                    <el-tabs style="display:none;" v-model="editableTabsValue" type="card" closable
                             @tab-remove="removeTab">
                        <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title"
                                     :name="item.name">
                            <span slot="label"><span class="method get">GET</span> {{item.title}}</span>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="api-header">
                        <el-alert :title="api.tips" type="success" :closable="false">
                        </el-alert>
                        <div class="api-post-wall">
                            <div class="api-post-bg">
                                <el-select class="select" v-model="methodVal" placeholder="请选择" size="medium">
                                    <el-option v-for="item in methodArr" :key="item.value" :label="item.value"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input class="input" size="medium" v-model="apiVal" placeholder=""></el-input>
                            </div>
                            <el-button type="primary" :disabled="!apiVal?true:false" @click="send">发送请求</el-button>
                        </div>
                    </div>
                    <el-tabs class="api-request" v-model="activeName" @tab-click="tabsClick">
                        <el-tab-pane name="first">
                            <span slot="label" v-if="!api.isParam">Params</span>
                            <span slot="label" v-if="api.isParam">
            <el-badge is-dot>Params</el-badge>
        </span>
                            <el-table :data="paramTable" height="345px" border size="small" style="width: 100%">
                                <el-table-column prop="key" width="60" align="center">
                                    <template slot="header" slot-scope="scope">
                                        <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                                   @click="addParams">
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                                   @click="removeParams(scope.$index)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="key" width="50" align="center">
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.status" size="small" placeholder="Key">
                                        </el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="key" label="KEY" width="300">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.key" size="small" placeholder="Key">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="VALUE">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.value" size="small" placeholder="Value">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="summary" label="描述" width="300">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.summary" size="small" placeholder="描述">
                                        </el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="Authorization" name="second">
                            <el-table :data="authorizTable" height="345px" border size="small" style="width: 100%">
                                <el-table-column prop="key" width="60" align="center">
                                    <template slot="header" slot-scope="scope">
                                        <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                                   @click="addAuthoriz">
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                                   @click="removeAuthoriz(scope.$index)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="key" label="KEY" width="300">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.key" size="small" placeholder="Key">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="VALUE">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.value" size="small" placeholder="Value">
                                        </el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="Headers" name="third">
                            <el-table :data="headerTable" height="345px" border size="small" style="width: 100%">
                                <el-table-column prop="key" width="60" align="center">
                                    <template slot="header" slot-scope="scope">
                                        <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                                   @click="addHeader">
                                        </el-button>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                                   @click="removeHeader(scope.$index)">
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="key" label="KEY" width="300">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.key" size="small" placeholder="Key">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="VALUE">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.value" size="small" placeholder="Value">
                                        </el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane name="fourth">
                            <span slot="label" v-if="!api.isBody">Body</span>
                            <span slot="label" v-if="api.isBody">
            <el-badge is-dot>Body</el-badge>
        </span>
                            <div class="body-raw">
                                <el-radio-group v-model="api.radio" size="small">
                                    <el-radio :label="1">none</el-radio>
                                    <el-radio :label="2">form-data</el-radio>
                                    <el-radio :label="3">x-www-form-urlencoded</el-radio>
                                    <el-radio :label="4">raw</el-radio>
                                </el-radio-group>
                                <el-dropdown v-show="api.radio==4" class="raw-select" size="small"
                                             @command="apiTypeCommand">
                <span class="el-dropdown-link">
                    {{api.type}} <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="application/json">
                                            application/json
                                        </el-dropdown-item>
                                        <el-dropdown-item command="application/xml">
                                            application/xml
                                        </el-dropdown-item>
                                        <el-dropdown-item command="application/javascropt">
                                            application/javascropt
                                        </el-dropdown-item>
                                        <el-dropdown-item command="text/plain">text/plain</el-dropdown-item>
                                        <el-dropdown-item command="text/html">text/html</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="body-main">
                                <el-table v-if="api.radio==2 || api.radio==3" height="290px" :data="formTable"
                                          border size="small" style="width: 100%">
                                    <el-table-column prop="key" width="60" align="center">
                                        <template slot="header" slot-scope="scope">
                                            <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                                       @click="addForm">
                                            </el-button>
                                        </template>
                                        <template slot-scope="scope">
                                            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                                       @click="removeForm(scope.$index)">
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="key" label="KEY" width="300">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.key" size="small" placeholder="Key">
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="value" label="VALUE">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.value" size="small" placeholder="Value">
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div v-if="api.radio==4" class="body-json">
                                    <div class="source">
                                        <el-input type="textarea" :autosize="{ minRows:10, maxRows: 10}"
                                                  placeholder="" v-model="api.body">
                                        </el-input>
                                    </div>
                                    <div style="width: 40%;">
                                        <el-tabs tab-position="left">
                                            <el-tab-pane label="说明">
                                                <el-table :data="responsesTable" border size="small" height="220">
                                                    <el-table-column
                                                            prop="key"
                                                            label="字段名"
                                                            width="150">
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="type"
                                                            label="类型"
                                                            width="100">
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="summary"
                                                            label="描述">
                                                    </el-table-column>
                                                </el-table>
                                            </el-tab-pane>
                                            <el-tab-pane label="格式化">
                                                <el-input type="textarea"
                                                          :autosize="{ minRows:10, maxRows: 10}" placeholder=""
                                                          v-model="api.jsonBody">
                                                </el-input>
                                            </el-tab-pane>
                                        </el-tabs>

                                    </div>
                                </div>

                                <p v-if="api.radio==1" class="empty">此方式请求没有正文</p>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </el-main>
                <el-footer>
                    <el-tabs class="api-request" v-model="activeFooterName">
                        <el-tab-pane label="Response Body" name="first">
                            <div class="return-main">
                                <el-input v-model="response.data" class="textarea-body" type="textarea" placeholder="">
                                </el-input>
                                <div class="return-summary">
                                    <el-table :data="returnTable" row-key="id" border default-expand-all size="small" height="100%">
                                        <el-table-column
                                                prop="key"
                                                label="字段名"
                                                width="150">
                                        </el-table-column>
                                        <el-table-column
                                                prop="type"
                                                label="类型"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="summary"
                                                label="描述">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="Headers" name="two" class="response-headers">
                            <el-descriptions title="响应头" :column="1" size="small" border>
                                <el-descriptions-item v-for="(val, key, index) in responseHeader" :key="index"
                                                      :label="key">
                                    {{val}}
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-descriptions title="请求标头" :column="1" size="small" border>
                                <el-descriptions-item v-for="(val, key, index) in requestHeader" :key="index"
                                                      :label="key">{{val}}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="response-status" v-if="response.status!=0">
                        <div>响应码：<span :class="response.status!=200?'red':''">{{response.status}}</span></div>
                        <div>
                            <i class="el-icon-time"></i><span>{{response.time}}ms</span>
                        </div>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
    <el-dialog
            title="全局参数设置"
            :visible.sync="globalDig.visible"
            width="50%">
        <el-tabs class="api-request" v-model="globalDig.tabsName">
            <el-tab-pane label="全局认证" name="first">
                <el-table :data="globalDig.authoriz"
                          border size="small" style="width: 100%">
                    <el-table-column prop="key" width="60" align="center">
                        <template slot="header" slot-scope="scope">
                            <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                       @click="addGlobalAuthoriz">
                            </el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                       @click="removeGlobalAuthoriz(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="key" width="50" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.status" size="small">
                            </el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="key" label="KEY" width="200">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.key" size="small" placeholder="Key">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="value" label="VALUE">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.value" size="small" placeholder="Value">
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="全局Header" name="two">
                <el-table :data="globalDig.header"
                          border size="small" style="width: 100%">
                    <el-table-column prop="key" width="60" align="center">
                        <template slot="header" slot-scope="scope">
                            <el-button type="primary" icon="el-icon-plus" circle size="mini"
                                       @click="addGlobalHeader">
                            </el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                       @click="removeGlobalHeader(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="key" width="50" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.status" size="small">
                            </el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="key" label="KEY" width="200">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.key" size="small" placeholder="Key">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="value" label="VALUE">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.value" size="small" placeholder="Value">
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="globalDig.visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="saveGlobalSetting">确 定</el-button>
    </span>
    </el-dialog>
</div>
<script>
    var beginTime = new Date();
    var endTime = new Date();
    var axiosrequerst = [];
    var loads = null;

    function showLoad() {
        loads = ELEMENT.Loading.service({
            lock: true,
            text: '努力加载中...',
        });
    }

    function hideLoad(requsturl) {
        var date = axiosrequerst.valueOf(requsturl)
        if (date != -1) {
            axiosrequerst.splice(date, 1);
        }
        if (axiosrequerst.length < 1) {
            loads.close();
        }
    }

    axios.interceptors.request.use(
        function (config) {
            beginTime = new Date();
            showLoad();
            vm.headerTable.forEach((item) => {
                if (item.key) {
                    config.headers[item.key] = item.value;
                }
            })
            vm.authorizTable.forEach((item) => {
                if (item.key) {
                    config.headers[item.key] = item.value;
                }
            })
            const authoriz = os.get('global-authorize');
            const header = os.get('global-header');
            if (authoriz) {
                authoriz.forEach((item) => {
                    if (item.status) {
                        config.headers[item.key] = item.value;
                    }
                })
            }
            if (header) {
                header.forEach((item) => {
                    if (item.status) {
                        config.headers[item.key] = item.value;
                    }
                })
            }
            config.headers['Content-Type'] = vm.api.type;
            axiosrequerst.push(config.url);
            return config;
        },
        function (error) {
            endTime = new Date();
            hideLoad(error.response.config.url);
            return error;
        }
    );
    axios.interceptors.response.use(
        function (response) {
            endTime = new Date();
            hideLoad(response.config.url);
            return response;
        },
        function (error) {
            endTime = new Date();
            hideLoad(error.response.config.url);
            return error;
        }
    );
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                theme: true,
                menuKey: undefined,
                globalDig: {
                    visible: false,
                    tabsName: 'first',
                    authoriz: [{
                        key: '',
                        value: '',
                        status: true
                    }],
                    header: [{
                        key: '',
                        value: '',
                        status: true
                    }]
                },
                editableTabsValue: '2',
                editableTabs: [{
                    title: '添加天气',
                    name: '1',
                }, {
                    title: '修改天气',
                    name: '2',
                }],
                methodArr: [{
                    value: 'GET',
                }, {
                    value: 'POST',
                }, {
                    value: 'PUT',
                }, {
                    value: 'DELETE',
                },],
                methodVal: 'GET',
                api: {
                    url: '',
                    tips: '',
                    menu: [],
                    sourceMenu: [],
                    radio: 4,
                    type: 'application/json',
                    isParam: false,
                    isBody: false,
                    body: '',
                    jsonBody: ''
                },
                apiVal: '',
                activeName: 'first',
                activeFooterName: 'first',
                paramTable: [{
                    key: '',
                    value: '',
                    summary: '',
                    status: true
                }],
                authorizTable: [{
                    key: '',
                    value: '',
                    status: true
                }],
                headerTable: [{
                    key: '',
                    value: '',
                    status: true
                }],
                formTable: [{
                    key: '',
                    value: '',
                    status: true
                }],
                returnTable:[],
                responsesTable: [],
                requestHeader: {},
                responseHeader: {},
                response: {
                    status: 0,
                    time: 0,
                    data: undefined
                },
                openeds: [],
                stlcalOpends: [],
                version: {
                    list: [],
                    index: 0,
                    res: undefined
                },
            }
        },
        watch: {
            menuKey: {
                handler() {
                    let _menu = [];
                    this.api.sourceMenu.forEach((item) => {
                        if (item.group.toLowerCase().includes(this.menuKey) || (item.summary && item.summary.includes(this.menuKey))) {
                            _menu.push(item)
                        }
                    })
                    this.api.menu = _menu;
                }
            },
            theme: {
                handler() {
                    if (this.theme) {
                        document.querySelector('body').classList.add("dark")
                    } else {
                        document.querySelector('body').classList.remove("dark")
                    }
                    os.set('theme', this.theme)
                }
            },
            paramTable: {
                handler() {
                    let par = this.encodeSearchParams(this.paramTable)
                    if (par) {
                        this.apiVal = this.api.url + '?' + par
                    } else {
                        this.apiVal = this.api.url
                    }
                },
                deep: true
            },
            'api.body': {
                handler() {
                    try {
                        if (!this.api.body) {
                            this.api.jsonBody = ''
                        }
                        const jsonObj = JSON.parse(this.api.body);
                        this.api.jsonBody = JSON.stringify(jsonObj, null, 2)
                    } catch (error) {
                    }
                },
            }
        },
        mounted() {
            const vtheme = os.get('theme')
            if (vtheme == null || vtheme) {
                document.querySelector('body').classList.add("dark")
            } else {
                this.theme = vtheme;
            }
            this.initVersion();
        },
        methods: {
            initVersion() {
                const that = this
                axios(os.path() + '/api-config').then(function (response) {
                    //console.log('config',response)
                    that.version.list = response.data.urls;
                    that.initApi(0);
                })
            },
            initApi(index) {
                this.api.menu = []
                const apiJson = this.version.list[index];
                //console.log('apiJson',apiJson)
                const that = this
                const menu = [], group = []
                axios(os.path() + apiJson.url).then(function (response) {
                    const res = response.data;
                    that.version.res = res;
                    that.api.tips = res.info.title;
                    // setting element menu Array
                    for (let k in res.paths) {
                        for (let item in res.paths[k]) {
                            group.push(res.paths[k][item].tags[0])
                            menu.push({
                                tag: res.paths[k][item].tags[0],
                                method: item,
                                url: k,
                                summary: res.paths[k][item].summary,
                                parameters: res.paths[k][item].parameters,
                                requestBody: res.paths[k][item].requestBody,
                                responseBody:res.paths[k][item].responses
                            })
                        }
                    }
                    os.unique(group).forEach((item, index) => {
                        that.openeds.push(index.toString())
                        let api = []
                        menu.forEach((row) => {
                            if (row.tag === item) {
                                api.push({
                                    method: row.method.toUpperCase(),
                                    url: row.url,
                                    summary: row.summary,
                                    parameters: row.parameters,
                                    requestBody: row.requestBody,
                                    responseBody:row.responseBody
                                })
                            }
                        })
                        let summary = undefined
                        // tags group 
                        if (res.tags) {
                            res.tags.forEach((tag) => {
                                if (tag.name === item) {
                                    summary = tag.description;
                                }
                            })
                        }
                        that.api.menu.push({group: item, summary: summary, api})
                    })
                    //console.log('api-menu',that.api.menu)
                    that.stlcalOpends = that.openeds;
                    that.api.sourceMenu = that.api.menu;
                })

            },
            versionBar(item, index) {
                this.version.index = index;
                this.initApi(index)
            },
            menuClick(item) {
                this.methodVal = item.method;
                this.api.url = os.path() + item.url;
                this.api.tips = item.summary ? item.summary : this.api.url;
                this.apiVal = os.path() + item.url
                //console.log('menu-item',item)

                // setting get param
                const that = this
                this.paramTable = [];
                this.responsesTable=[];
                this.returnTable=[];
                this.response.data = '';
                this.api.isParam = false;
                this.api.isBody = false;
                this.api.body = undefined;
                const entity = os.getParamEntity(item, this.version.res);
                if (entity && item.method === 'GET') {
                    this.paramTable = entity;
                    this.paramTable.forEach((item) => {
                        if(item.type){
                            item.summary+='（'+item.type+'）';
                        }
                    })
                }
                if (entity && item.method !== 'GET') {
                    this.api.body = os.refBodyEntity(entity, this.version.res);
                    this.api.isBody = true;
                }
                if (item.parameters) {
                    this.api.isParam = true;
                    item.parameters.forEach((item) => {
                        that.paramTable.push({key: item.name, value: '', status: true, summary: item.description})
                    })
                }
                
                const responseRes=os.getResponses(item, this.version.res)
                if(responseRes.data){
                    this.returnTable=responseRes.data;
                    this.response.data=responseRes.example;
                }else{
                    this.response.data=responseRes.tip;
                }

            },
            openMenu() {
                if (this.openeds.length > 0) {
                    this.openeds = [];
                } else {
                    this.openeds = this.stlcalOpends;
                }
            },
            addParams() {
                this.paramTable.push({key: '', value: '', status: true})
            },
            removeParams(row) {
                this.paramTable.splice(row, 1);
            },
            addAuthoriz() {
                this.authorizTable.push({key: '', value: '', status: true})
            },
            removeAuthoriz(row) {
                this.authorizTable.splice(row, 1);
            },
            addHeader() {
                this.headerTable.push({key: '', value: '', status: true})
            },
            removeHeader(row) {
                this.headerTable.splice(row, 1);
            },
            addForm() {
                this.formTable.push({key: '', value: '', status: true})
            },
            removeForm(row) {
                this.formTable.splice(row, 1);
            },
            addGlobalAuthoriz() {
                this.globalDig.authoriz.push({key: '', value: '', status: true})
            },
            removeGlobalAuthoriz(row) {
                this.globalDig.authoriz.splice(row, 1);
            },
            addGlobalHeader() {
                this.globalDig.header.push({key: '', value: '', status: true})
            },
            removeGlobalHeader(row) {
                this.globalDig.header.splice(row, 1);
            },
            openGlobalSetting() {
                const authoriz = os.get('global-authorize');
                const header = os.get('global-header');
                if (authoriz) {
                    this.globalDig.authoriz = authoriz
                }
                if (header) {
                    this.globalDig.header = header
                }
                this.globalDig.visible = true;
            },
            saveGlobalSetting() {
                let isAuthorize = false, isHeader = false
                this.globalDig.authoriz.forEach((item) => {
                    if (!item.key || !item.value) {
                        isAuthorize = true
                    }
                })
                if (isAuthorize) {
                    this.$message.error('全局认证信息不能为空~');
                    return
                }
                this.globalDig.header.forEach((item) => {
                    if (!item.key || !item.value) {
                        isHeader = true
                    }
                })
                if (isHeader) {
                    this.$message.error('全局Header信息不能为空~');
                    return
                }
                os.set('global-authorize', this.globalDig.authoriz);
                os.set('global-header', this.globalDig.header);
                this.globalDig.visible = false;
            },
            encodeSearchParams(obj) {
                const params = []
                obj.forEach((item) => {
                    if ((item.key || item.value) && item.status) {
                        params.push(item.key + '=' + item.value)
                    }
                })
                return params.length > 0 ? params.join('&') : ''
            },
            apiTypeCommand(command) {
                this.api.type = command
            },
            tabsClick(tab, event) {
                //console.log(tab.index);
            },
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: 'New Tab',
                    name: newTabName,
                    content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            send() {
                /*console.log('请求方式：', this.methodVal)
                console.log('请求地址：', this.apiVal)
                console.log('请求参数-Param：', this.paramTable)
                console.log('请求参数-Authoriz：', this.authorizTable)
                console.log('请求参数-Headers：', this.headerTable)
                console.log('请求参数-Form.Data：', this.formTable)
                console.log('请求参数-Body-Type：', this.api.radio)
                console.log('请求参数-Request-Type：', this.api.type)
                console.log('请求参数-Body：', this.api.body)*/
                const that = this
                if (this.methodVal === 'GET') {
                    axios(this.apiVal).then(function (response) {
                        const res = JSON.parse(JSON.stringify(response))
                        that.response.time = (endTime.getTime() - beginTime.getTime()) / 1000
                        that.requestHeader = res.config.headers
                        if (res.response) {
                            that.responseHeader = res.response.headers
                            that.response.status = res.response.status
                            that.response.data = undefined
                        } else {
                            that.response.status = res.status
                            that.responseHeader = res.headers
                            try {
                                that.response.data = JSON.stringify(res.data, null, 2)
                            } catch (error) {
                                that.response.data = res.data
                            }
                        }
                    });
                }
                if (this.methodVal == 'POST') {
                    let param = undefined
                    if (os.isJSON(this.api.body)) {
                        param = JSON.parse(this.api.body)
                    } else {
                        param = this.api.body
                    }
                    axios.post(this.apiVal, param)
                        .then(function (response) {
                            const res = JSON.parse(JSON.stringify(response))
                            that.requestHeader = res.config.headers
                            that.response.time = (endTime.getTime() - beginTime.getTime()) / 1000
                            if (res.response) {
                                that.responseHeader = res.response.headers
                                that.response.status = res.response.status
                                that.response.data = undefined
                            } else {
                                that.response.status = res.status
                                that.responseHeader = res.headers
                                try {
                                    that.response.data = JSON.stringify(res.data, null, 2)
                                } catch (error) {
                                    that.response.data = res.data
                                }
                            }
                        })
                        .catch(function (error) {
                            that.$message.error(error.message);
                        });
                }
                if (this.methodVal == 'PUT') {
                    let param = undefined
                    if (os.isJSON(this.api.body)) {
                        param = JSON.parse(this.api.body)
                    } else {
                        param = this.api.body
                    }
                    axios.put(this.apiVal, param)
                        .then(function (response) {
                            const res = JSON.parse(JSON.stringify(response))
                            that.requestHeader = res.config.headers
                            that.response.time = (endTime.getTime() - beginTime.getTime()) / 1000
                            if (res.response) {
                                that.responseHeader = res.response.headers
                                that.response.status = res.response.status
                                that.response.data = undefined
                            } else {
                                that.response.status = res.status
                                that.responseHeader = res.headers
                                try {
                                    that.response.data = JSON.stringify(res.data, null, 2)
                                } catch (error) {
                                    that.response.data = res.data
                                }
                            }
                        })
                        .catch(function (error) {
                            that.$message.error(error.message);
                        });
                }
                if (this.methodVal == 'DELETE') {
                    let param = undefined
                    if (os.isJSON(this.api.body)) {
                        param = JSON.parse(this.api.body)
                    } else {
                        param = this.api.body
                    }
                    axios({
                        method: "delete",
                        url: this.apiVal,
                        data: param,
                    })
                        .then((response) => {
                            const res = JSON.parse(JSON.stringify(response))
                            that.requestHeader = res.config.headers
                            that.response.time = (endTime.getTime() - beginTime.getTime()) / 1000
                            if (res.response) {
                                that.responseHeader = res.response.headers
                                that.response.status = res.response.status
                                that.response.data = undefined
                            } else {
                                that.response.status = res.status
                                that.responseHeader = res.headers
                                try {
                                    that.response.data = JSON.stringify(res.data, null, 2)
                                } catch (error) {
                                    that.response.data = res.data
                                }
                            }
                        })
                        .catch((error) => {
                            that.$message.error(error.message);
                        });
                }
            }
        }
    })
</script>
</body>
</html>